<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../js/lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	function get_text() {
		//这是原生的js写法
		//alert(document.getElementById('txt').value);	
		//使用jQuery的写法
		alert($('#txt').val());
	}

	function tagSelector() {
		$("div").css('border', '1px solid red');
	}

	function idSelector() {
		$("#to").html($("#from").html());
		//html() 方法内没有参数的表示获取属性值；方法内如果有参数则是设定属性值
		//html() 类似于innerHtml的属性
	}

	function classSelector() {
		//css()方法，一个参数表示获取样式的值，两个参数表示设定样式值
		$(".fruit").css('color', 'red');
		alert('$(".fruit").css("color"):' + $(".fruit").css('color'))
	}

	function sortSelector() {
		$('.fruit,#tomato').css('color', 'red');
	}
	function starSelector() {
		console.log($('*')[0]);
	}

	function descSelector() {
		$('div label').css('color', 'red');
	}
	function bodySelector() {
		console.log($('body *'));
	}

	function sonSelector() {
		$('div > label').css('color', 'red');
	}

	function neighborSelector() {
		$('p + label').css('color', 'red');
	}

	function neighborSelector2() {
		$('p ~ label').css('color', 'red');
	}

	function firstLast() {
		$('li:first').css('color', 'red');
		$('li:last').css('color', 'blue');
	}

	function firstLastChild() {
		$('li:first-child').css('color', 'red');
		$('li:last-child').css('color', 'blue');
	}
	function eqSelector() {
		$('li:eq(7)').css('color', 'red');
	}

	function containsSelector() {
		$('li:contains(to)').css('color', 'blue');
	}

	function hasSelector() {
		$('li:has(span)').css('color', 'red');

	}
	function showHidden() {
		$('p:hidden').show();
	}

	function showHidden2() {
		$('p:visible').hide();
	}

	function propSelector() {
		//$('input[id=ipt]').val('hello');
		//$('input[class=cls_ipt]').val('hello2');
		$('input[name="name_ipt"]').val('hello3');
		//val()方法，无参数表示获取值，有一个参数表示设定值
	}

	function cloneE() {
		var cloned_p = $('#pp02').clone();
		$('#pp02').after(cloned_p);
	}

	function over() {
		$(this).css('color', 'red')
	}
	function out() {
		$(this).css('color', 'black')
	}

	function showAndHide() {
		var display = $('#div01')[0].style.display;
		if (display || display == "none") {
			$('#div01').show(3000, function() {
				$('#btn01').val("隐藏Div");
			});
		} else {
			$('#div01').hide(2000, function() {
				$('#btn01').val("显示Div");
			});

		}

	}
	function upAndDown() {
		var display = $('#div01')[0].style.display;
		if (display || display == "none") {
			$('#div01').slideDown(4000);
		} else {
			$('#div01').slideUp(4000);

		}

	}

	function inAndOut() {
		var display = $('#div01')[0].style.display;
		if (display || display == "none") {
			$('#div01').fadeIn(4000);
		} else {
			$('#div01').fadeOut(4000);

		}

	}
</script>
</head>
<body>
	<input type="text" id="txt" />
	<button type="button" onclick="get_text();">Go</button>
	<hr />
	<div style="width: 100px; height: 100px;">
		<span>我是一个div</span>
	</div>

	<input type="button" onclick="tagSelector()" value="标签选择器">
	<div id="from">div的内容</div>
	<div id="to"></div>
	<input type="button" onclick="idSelector()" value="ID选择器">

	<ul>
		<li class="fruit">Apple</li>
		<li id="tomato">Tomato</li>
		<li class="fruit">Banana</li>
		<li>Potato</li>
		<li class="fruit">Orange</li>
	</ul>
	<input type="button" onclick="classSelector()" value="Class选择器">
	<input type="button" onclick="sortSelector()" value="逗号选择器">
	<input type="button" onclick="starSelector()" value="*选择器">
	<div>
		<span>祖先元素</span>
		<p>
			<label>孙元素</label> <span><label>后代元素</label></span>
		</p>
		<br /> <label>子元素1</label> <label>子元素2</label> <label>子元素3</label> <span>子元素4</span>
	</div>
	<label>子元素</label>
	<input type="button" onclick="descSelector()" value="后代选择器">
	<input type="button" onclick="bodySelector()" value="Body*选择器">
	<input type="button" onclick="sonSelector()" value="父子选择器">
	<input type="button" onclick="neighborSelector()" value="相邻选择器">
	<input type="button" onclick="neighborSelector2()" value="邻居选择器">

	<ul>
		<li>Apple</li>
		<li>Tomato</li>
		<li>Banana</li>
		<li>Potato</li>
		<li>Orange</li>
		<li>Apple2
			<p>
				<span>Span</span>
			</p>
		</li>
	</ul>
	<input type="button" onclick="firstLast()" value="第一个/最后一个选择器">
	<input type="button" onclick="firstLastChild()" value="第一个/最后一个子元素选择器">
	<input type="button" onclick="eqSelector()" value="过滤eq选择器">
	<input type="button" onclick="containsSelector()" value="包含选择器">
	<input type="button" onclick="hasSelector()" value="Has选择器">

	<p style="display: none;">我是隐藏的</p>
	<input type="button" onclick="showHidden()" value="显示过滤选择器">
	<input type="button" onclick="showHidden2()" value="隐藏过滤选择器">

	<hr />
	<input id="ipt" name="name_ipt" type="text" class="cls_ipt" />
	<input type="button" onclick="propSelector()" value="属性选择器">


	<form id="my_form">
		<input type="text" /> <input type="radio" /> <input type="radio"
			checked="checked" /> <input type="checkbox" /> <input
			type="checkbox" checked="checked" />
	</form>
	<script type="text/javascript">
		console.log($('#my_form :input:checked'));
	</script>

	<hr />
	<select id="sel" multiple="multiple">
		<option value="0">苹果</option>
		<option value="1" selected="selected">桔子</option>
		<option value="2">荔枝</option>
		<option value="3" selected="selected">葡萄</option>
		<option value="4">香蕉</option>
	</select>
	<script type="text/javascript">
		console.log($('#sel :selected'));
	</script>

	<hr />
	<form id="my_form2" action="foo.php"></form>

	<script type="text/javascript">
		console.log($('#my_form2').attr('action'));
		$('#my_form2').attr('action', 'bar.html');
		console.log($('#my_form2').attr('action'));
	</script>

	<!-- 演示属性的删除和添加 -->
	<!-- <img alt="demo" src="../../imgs/demo.jpg" /> -->

	<p id="pp00">
		<b>Hello</b>
	</p>

	<script type="text/javascript">
		console.log($('p').html());
		//$('p').text('<i>World</i>');
		console.log($('p').html());
	</script>

	<p id="pp01" class="A B C D E">这是一个P标签</p>

	<p id="pp02">
		<input type="text" /><input type="button" value="Go" />
	</p>
	<input type="button" onclick="cloneE()" value="$ clone" />

	<script type="text/javascript">
		$(function() {
			$('#btn').bind('click', function() {
				$(this).attr("disabled", "true");
			})

			$('#txt01').hover(over, out);
		});
	</script>

	<input id="btn" type="button" value="点我" />

	<input id="txt01" type="text" value="这是初始值" />
	<hr />
	<div id="div01"
		style="width: 150px; height: 100px; color: red; background-color: lightblue;">
		这是一个div元素</div>
	<input id="btn01" type="button" value="隐藏Div" onclick="showAndHide()" />
	<input id="btn02" type="button" value="Up-Down" onclick="upAndDown()" />
	<input id="btn03" type="button" value="In-Out" onclick="inAndOut()" />
	<hr />
	<div id="div02"
		style="width: 24px; height: 32px; border: 1px solid red;"></div>
	<button id="btn04" type="button">变大</button>

	<script type="text/javascript">
		$('#btn04').bind('click', function() {
			$('#div02').animate({
				width : '240px',
				height : '320px'
			}, 3000);
		});
	</script>

	<div id="div03"
		style="position: relative; width: 24px; height: 32px; border: 1px solid red;"></div>
	<button id="btn05" type="button">向右</button>

	<script type="text/javascript">
		$('#btn05').bind('click', function() {
			$('#div03').animate({
				left : '+=100px'
			}, 3000);
		});
	</script>

</body>
</html>